<template>
  <div class="announcement-container">
    <div class="announcement-header">公告</div>
    <div class="announcement-content">
      <div v-for="(notification, index) in notifications" :key="index" class="notification-item">
        <div class="notification-title">{{ notification.title }}</div>
        <div class="notification-time">{{ notification.notice }}</div>
      </div>
    </div>
  </div>
</template>



<script>
import { METHODS } from 'http';
import { nowNotice } from '../../api/system/notice';
export default {
  data() {
    return {
      notifications: []
    }
  },
  onLoad() {
	  // console.log("调用生命周期函数");
	  this.getList();
  },
  methods:{
	  getList(){
		// console.log("调用list方法");
	  	nowNotice().then(res => {
	        // console.log(res);
			let reg = /<[^>]+>/gi;
	        this.notifications = res.data;
			this.notifications.forEach(item=>{
				if(item.notice){
					item.notice = item.notice.replace(reg,"");
				}
			});
	      })
	  }
  }
};
</script>

<style scoped>
	.announcement-container {
	  border: 1px solid #d9d9d9;
	  border-radius: 8px; /* 增加圆角 */
	  padding: 20px;
	  margin-top: 20px;
	  background-color: #f9f9f9; /* 奶白色背景 */
	}
	.announcement-header {
	  font-size: 18px;
	  font-weight: bold;
	  text-align: left; /* 标题左对齐 */
	  margin-bottom: 10px;
	}
	
	.announcement-content {
	  display: flex;
	  flex-direction: column;
	}
	
	.notification-item {
	  display: flex;
	  flex-direction: column; /* 垂直排列 */
	  margin-bottom: 20px; /* 增加间距 */
	  padding: 10px;
	  border: 1px solid #d9d9d9;
	  border-radius: 8px; /* 增加圆角 */
	  background-color: #fff; /* 白色背景 */
	}
	
	.notification-title {
	  font-size: 16px;
	  font-weight: bold;
	  margin-bottom: 5px; /* 增加间距 */
	}
	
	.notification-time {
	  font-size: 14px;
	  color: #888;
	  align-self: flex-end; /* 时间右对齐 */
	}
</style>
